<template>
  <div class="screenE">
  
    <transition
    name="custom-classes-transition"
    enter-active-class="animated bounceInLeft"
    leave-active-class="animated bounceOutRight">
      <!-- <keep-alive> -->
        <component v-bind:is="view"></component>
      <!-- </keep-alive> -->
    </transition>
  </div>
</template>

<script>
import HospitalF from './view/hospital/hospitalF.vue'
import HospitalF_back from './view/hospital/hospitalF_back.vue'
import GovernmentF from './view/government/governmentF.vue'
import IndustryF from './view/industry/industryF.vue'
import WaterF from './view/water/waterF.vue'
export default {
  name: 'screenF',
  data () {
    return {
      ws: null,
      sysId: '0'
    }
  },
  mounted: function () {
    this.receiveSysid()
  },
  computed: {
    view: function () {
      return 'f-' + this.sysId
    }
  },
  methods: {
    receiveSysid: function() {
      var socket = new WebSocket("ws://"+wsaddress+"/vqdisplay/pageswitch/f")
      this.ws = socket;
      socket.onmessage = this.wsOnMessage;
    },
    wsOnMessage: function (e) {
      this.sysId = e.data;
    }
  },
  components: {
    'f-0': HospitalF_back,
    'f-1': HospitalF,
    'f-2': GovernmentF,
    'f-3': IndustryF,
    'f-4': WaterF,
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
   
.screenD {
  margin: 0;
  padding: 0; 
  width: 100%;
  height: 100vh;
}
.component-fade-enter-active, .component-fade-leave-active {
  transition: opacity .3s ease;
}
.component-fade-enter, .component-fade-leave-to
/* .component-fade-leave-active 在低于 2.1.8 版本中 */ {
  opacity: 0;
}
</style>
